{extend name="app/shop/view/base.html"/}
{block name="resources"}
<style>
	.gift-box{padding: 20px;}
	.gift-box .layui-form{padding: 0!important;}
	.layui-layer-content{overflow: auto !important;background-color: #f7f7f7;}
	.ns-form{margin-top: 0;}
	.layui-input {display: inline-block;}
</style>
{/block}
{block name="main"}
{if $exchange_info['type'] == 1}
<!-- 商品 -->
<div class="exchange-gift content layui-form ns-form">

	<div class="layui-form-item">
	    <label class="layui-form-label">商品图片：</label>
		<div class="layui-input-block img-upload">
			<div class="upload-img-block square">
				<div class="upload-img-box">
					{if condition="$exchange_info.image"}
					<img src="{:img($exchange_info.image)}" id="exchange_type_1_img">
					{else/}
					<img src="__STATIC__/img/shape.png" />
					{/if}
				</div>
			</div>
		</div>
	</div>
	
	<div class="layui-form-item">
	    <label class="layui-form-label">商品名称：</label>
	    <div class="layui-input-block" id="exchange_type_1_name">
	    	<p class="ns-input-text">{$exchange_info.name}</p>
	    </div>
	</div>
	
	<div class="layui-form-item">
	    <label class="layui-form-label">商品价格：</label>
	    <div class="layui-input-block" id="exchange_type_1_price">
			<p class="ns-input-text">￥{$exchange_info.market_price}</p>
	    </div>
	</div>

	<div class="layui-form-item">
		<label class="layui-form-label"><span class="required">*</span>兑换方式：</label>
		<div class="layui-input-block">
			<input type="radio" name="pay_type" lay-filter="pay_type" value="0" title="积分" checked>
<!--			<input type="radio" name="pay_type" lay-filter="pay_type" value="1" title="积分+金额" {if $exchange_info.pay_type == 1} checked {/if}>-->
		</div>
	</div>

	<div class="layui-form-item">
		<label class="layui-form-label"></label>
		<div class="layui-input-block pay_price">
			{if $exchange_info.pay_type == 1}
			<input type="number" name="point" min="0" value="{$exchange_info.point}" lay-verify="required_point" autocomplete="off" class="layui-input ns-len-short"> 积分
			&nbsp;&nbsp;+ &nbsp;&nbsp;
			<input type="number" name="price" min="0" value="{$exchange_info.price}" lay-verify="required_money" autocomplete="off" class="layui-input ns-len-short"> 元
			{else/}
			<input type="number" name="point" min="0" value="{$exchange_info.point}"  lay-verify="required_point" autocomplete="off" class="layui-input ns-len-short"> 积分
			{/if}
		</div>
	</div>

	<div class="layui-form-item">
		<label class="layui-form-label">兑换限制：</label>
		<div class="layui-input-block">
			每人 <input type="number" name="limit_num" value="{$exchange_info.limit_num}" min="0" lay-verify="required" autocomplete="off" class="layui-input ns-len-short"> 件
		</div>
	</div>

	<div class="layui-form-item">
		<label class="layui-form-label">是否上架：</label>
		<div class="layui-input-block">
			<p class="ns-input-text ns-len-long"><input id="state" type="checkbox" name="state" lay-skin="switch" {if $exchange_info['state'] == 1}checked {/if} value="1" lay-filter="state"></p>
		</div>
	</div>
	
	<div class="ns-form-row">
		<button class="layui-btn ns-bg-color" lay-submit lay-filter="save">保存</button>
		<button class="layui-btn layui-btn-primary" onclick="back()">返回</button>
	</div>

	<input type="hidden" name="type" value="1">
	<input type="hidden" name="sku_id" value="{$exchange_info.type_id}">
	<input type="hidden" name="id" value="{$exchange_info.id}">
</div>
{/if}

{if $exchange_info['type'] == 2}
<!-- 优惠券 -->
<div class="exchange-coupon content layui-form ns-form">
	<div class="layui-form-item">
	    <label class="layui-form-label">优惠券图片：</label>
		<div class="layui-input-block img-upload">
			<div class="upload-img-block square">
				<div class="upload-img-box">
					{if condition="$exchange_info.image"}
					<img src="{:img($exchange_info.image)}" id="exchange_type_2_img">
					{else/}
					<img src="__STATIC__/img/shape.png" />
					{/if}
				</div>
			</div>
		</div>
	</div>
	
	<div class="layui-form-item">
	    <label class="layui-form-label">优惠券名称：</label>
	    <div class="layui-input-block" id="exchange_type_2_name">
			<p class="ns-input-text">{$exchange_info.name}</p>
	    </div>
	</div>
	
	{if condition="$exchange_info['coupon_type'] == 'reward'"}
	<div class="layui-form-item">
	    <label class="layui-form-label">优惠券面值：</label>
	    <div class="layui-input-block" id="exchange_type_2_price">
			<p class="ns-input-text">￥{$exchange_info.market_price}</p>
	    </div>
	</div>
	{elseif condition="$exchange_info['coupon_type'] == 'discount'"}
	<div class="layui-form-item js-coupon-discount">
		<label class="layui-form-label">优惠券折扣：</label>
		<div class="layui-input-block" id="coupon_discount">
			<p class="ns-input-text ns-text-null">{$exchange_info.market_price}折</p>
		</div>
	</div>
	{/if}
	

	<div class="layui-form-item">
		<label class="layui-form-label"><span class="required">*</span>兑换积分：</label>
		<div class="layui-input-block">
			<input type="number" name="point" lay-verify="required" placeholder="请输入所需的兑换积分数" value="{$exchange_info.point}"
			 class="layui-input ns-len-short">
		</div>
	</div>
	
	<div class="layui-form-item">
		<label class="layui-form-label">是否上架：</label>
		<div class="layui-input-block">
			<input id="state" type="checkbox" name="state" lay-skin="switch" {if $exchange_info['state'] == 1}checked {/if} value="1" lay-filter="state">
		</div>
	</div>
	
	<div class="layui-form-item">
		<label class="layui-form-label"><span class="required">*</span>优惠券描述：</label>
		<div class="layui-input-block ns-special-length">
			<script id="container" name="content" type="text/plain" style="width: 800px; height: 300px;"></script>
		</div>
	</div>
	
	<div class="ns-form-row">
		<button class="layui-btn ns-bg-color" lay-submit lay-filter="save">保存</button>
		<button class="layui-btn layui-btn-primary" onclick="back()">返回</button>
	</div>

	<input type="hidden" name="type" value="2">
	<input type="hidden" name="id" value="{$exchange_info.id}">
	<input type="hidden" name="coupon_type_id" value="{$exchange_info.type_id}">
	<input type="hidden" id="content" value="{$exchange_info.content}" />
</div>
{/if}

{if $exchange_info['type'] == 3}
<!-- 红包 -->
<div class="exchange-red-packet content layui-form ns-form">
	<div class="layui-form-item">
		<label class="layui-form-label"><span class="required">*</span>红包名称：</label>
		<div class="layui-input-block">
			<input type="text" name="name" lay-verify="required" placeholder="请输入红包名称" value="{$exchange_info.name}" class="layui-input ns-len-long">
		</div>
	</div>
	
	<div class="layui-form-item">
		<label class="layui-form-label img-upload-lable">红包封面：</label>
		<input type="hidden" name="image" value="{$exchange_info.image}" />
		<div class="layui-input-inline img-upload">
			<div class="upload-img-block icon square">
				<div class="upload-img-box" id="redPacket">
					{if condition="$exchange_info.image"}
					<img src="{:img($exchange_info.image)}" alt="">
					{else/}
					<div class="ns-upload-default">
						<img src="SHOP_IMG/upload_img.png" />
						<p>点击上传</p>
					</div>
					{/if}
				</div>
			</div>
		</div>
	</div>
	
	<div class="layui-form-item">
		<label class="layui-form-label"><span class="required">*</span>发放红包数量：</label>
		<div class="layui-input-block">
			<input type="number" name="stock" lay-verify="required" placeholder="请输入红包数量" value="{$exchange_info.stock}" class="layui-input ns-len-short">
		</div>
	</div>
	
	<div class="layui-form-item">
		<label class="layui-form-label"><span class="required">*</span>兑换积分：</label>
		<div class="layui-input-block">
			<input type="number" name="point" lay-verify="required" placeholder="请输入所需的兑换积分数" value="{$exchange_info.point}"
			 class="layui-input ns-len-short">
		</div>
	</div>
	
	<div class="layui-form-item">
		<label class="layui-form-label"><span class="required">*</span>余额：</label>
		<div class="layui-input-block">
			<input type="number" name="balance" lay-verify="required" placeholder="请输入红包余额" value="{$exchange_info.balance}"
			 class="layui-input ns-len-short">
		</div>
		<p class="ns-word-aux">兑换的红包会以余额的形式发放给指定会员</p>
	</div>
	
    <div class="layui-form-item">
		<label class="layui-form-label">是否上架：</label>
		<div class="layui-input-block">
			<input id="state" type="checkbox" name="state" lay-skin="switch" {if $exchange_info['state'] == 1}checked {/if} value="1" lay-filter="state">
		</div>
    </div>
	
	<div class="layui-form-item">
		<label class="layui-form-label"><span class="required">*</span>红包描述：</label>
		<div class="layui-input-block ns-special-length">
			<script id="containerT" name="content" type="text/plain" style="height: 300px;"></script>
		</div>
	</div>
	
	<div class="ns-form-row">
		<button class="layui-btn ns-bg-color" lay-submit lay-filter="save">保存</button>
		<button class="layui-btn layui-btn-primary" onclick="back()">返回</button>
	</div>

	<input type="hidden" name="type" value="3">
	<input type="hidden" name="id" value="{$exchange_info.id}">
	<input type="hidden" id="contentT" value="{$exchange_info.content}" />
</div>
{/if}

<input type="hidden" id="type" value="{$exchange_info.type}" />
{/block}
{block name="script"}
<!-- 优惠券 -->
<script type="text/html" id="couponList">
	<div class="gift-box">
		<div class="ns-function-search">
			<div class="layui-form">
				<div class="layui-input-inline ns-len-mid">
					<input type="text" name="coupon_name" placeholder="请输入礼品名称/关键字" class="layui-input">
					<button type="button" class="layui-btn layui-btn-primary" lay-filter="coupon-search" lay-submit>
						<i class="layui-icon">&#xe615;</i>
					</button>
				</div>
			</div>
		</div>
		<table id="coupon_list" lay-filter="coupon_list"></table>
	</div>
</script>

<!-- 优惠券-名称 -->
<script type="text/html" id="couponName">
	<div class="ns-table-tuwen-box">
		<div class="ns-img-box">
			<img src="{{ns.img(d.image)}}" alt="">
		</div>
		<div class="ns-font-box">
			<p class="ns-multi-line-hiding">{{d.coupon_name}}</p>
		</div>
	</div>
</script>

<!-- 优惠券-操作 -->
<script type="text/html" id="couponOperation">
	<a class="layui-btn" lay-event="add">添加</a>
</script>
<script type="text/javascript" charset="utf-8" src="STATIC_EXT/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="STATIC_EXT/ueditor/ueditor.all.js"></script>
<script type="text/javascript" charset="utf-8" src="STATIC_EXT/ueditor/lang/zh-cn/zh-cn.js"></script>
<script>
	var _time = $(".coupon-create-time input").val();
	$(".coupon-create-time").text(ns.time_to_date(_time));

	var _type = $("#type").val();

	//实例化富文本
	var ue, html = '';
	if (_type == 2) {
		ue = UE.getEditor('container');
		ue.ready(function() {   //对编辑器的操作最好在编辑器ready之后再做
			var con = $("#content").val();
			ue.setContent(con);   //获取html内容，返回: <p>hello</p>
		});
	} else if (_type == 3) {
		ue = UE.getEditor('containerT');
		ue.ready(function() {   //对编辑器的操作最好在编辑器ready之后再做
			var con = $("#contentT").val();
			ue.setContent(con);   //获取html内容，返回: <p>hello</p>
		});
	}

	var giftTable, couponTable, form, laytpl,upload;

	layui.use(['form', 'laytpl', "upload"], function() {
		form = layui.form;
		laytpl = layui.laytpl;
		upload = layui.upload;
		form.render();

		var uploadInst = upload.render({
			elem: '#redPacket',
			url: ns.url("shop/upload/upload"),
			done: function(res) {
				if (res.code >= 0) {
					$("input[name='image']").val(res.data.pic_path);
					$("#redPacket").html("<img src=" + ns.img(res.data.pic_path) + " >");
				}
				return layer.msg(res.message);
			}
		});

        //监听兑换方式
        form.on('radio(pay_type)', function(data){
            var value = data.value;
            var html = '';
            if(value == 1){
                html = '<input type="number" name="point" min="0" lay-verify="required_point" autocomplete="off" class="layui-input ns-len-short"> 积分' +
                    '&nbsp;&nbsp;+ &nbsp;&nbsp;<input type="number" name="price" min="0" lay-verify="required_money" autocomplete="off" class="layui-input ns-len-short"> 元' +
                    '';
            }
            if(value == 0){
                html = '<input type="number" name="point" min="0"  lay-verify="required_point" autocomplete="off" class="layui-input ns-len-short"> 积分';
            }
            $('.pay_price').html(html);
        });

		/**
		 * 商品列表搜索
		 */
		form.on('submit(gift-search)', function(data) {
			giftTable.reload({
				page: {
					curr: 1
				},
				where: data.field
			});
		});

		/**
		 * 优惠券列表搜索
		 */
		form.on('submit(coupon-search)', function(data) {
			couponTable.reload({
				page: {
					curr: 1
				},
				where: data.field
			});
		});

		/**
		 * 监听表单提交
		 */
		form.on('submit(save)', function(data) {

			if (_type == 2) {
				ue.ready(function() {   //对编辑器的操作最好在编辑器ready之后再做
					html = ue.getContent();   //获取html内容，返回: <p>hello</p>
				});
			} else if (_type == 3) {
				ue.ready(function() {   //对编辑器的操作最好在编辑器ready之后再做
					html = ue.getContent();   //获取html内容，返回: <p>hello</p>
				});
			}

			data.field.content = html;

			$.ajax({
				url: ns.url("pointexchange://shop/exchange/edit"),
				data: data.field,
				dataType: 'JSON',
				type: 'POST',
				async: false,
				success: function(res) {
					if (res.code == 0) {
						layer.confirm('编辑成功', {
							title: '操作提示',
							btn: ['返回列表', '继续操作'],
							yes: function() {
								location.href = ns.url("pointexchange://shop/exchange/lists")
							},
							btn2: function() {
								location.reload();
							}
						});
					} else {
						layer.msg(res.message);
					}
				}
			});
		});
		
		form.verify({
			required_point: function(value) {
				if (value == "") {
					return '积分不能为空';
				}
			},
			required_money: function(value) {
				if (value == "") {
					return '金额不能为空';
				}
			}
		})
	});
	
	//返回
	function back() {
		location.href = ns.url("pointexchange://shop/exchange/lists");
	}
</script>
{/block}